<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-section {
            background: white;
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #45a049;
        }
        .result {
            background: #f9f9f9;
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
            max-height: 300px;
            overflow-y: auto;
        }
        .error {
            background: #ffebee;
            border-color: #f44336;
            color: #c62828;
        }
        .success {
            background: #e8f5e8;
            border-color: #4caf50;
            color: #2e7d32;
        }
    </style>
</head>
<body>
    <h1>🧪 API测试页面</h1>
    
    <div class="test-section">
        <h2>1. 服务器健康检查</h2>
        <button onclick="testHealth()">测试健康检查</button>
        <div id="healthResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h2>2. 算命API测试</h2>
        <button onclick="testFortune()">测试算命API</button>
        <div id="fortuneResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h2>3. 天气API测试</h2>
        <button onclick="testWeatherConfig()">检查天气配置</button>
        <button onclick="testWeather()">测试天气API</button>
        <div id="weatherResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h2>4. 表单测试</h2>
        <form id="testForm">
            <p>
                <label>姓名: <input type="text" name="name" value="测试用户" required></label>
            </p>
            <p>
                <label>生日: <input type="date" name="birthDate" value="1990-01-01" required></label>
            </p>
            <p>
                <label>性别: 
                    <select name="gender" required>
                        <option value="male">男</option>
                        <option value="female">女</option>
                    </select>
                </label>
            </p>
            <p>
                <label>城市: <input type="text" name="city" value="北京" placeholder="可选"></label>
            </p>
            <button type="submit">提交测试</button>
        </form>
        <div id="formResult" class="result"></div>
    </div>

    <script>
        // 显示结果的辅助函数
        function showResult(elementId, data, isError = false) {
            const element = document.getElementById(elementId);
            element.textContent = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
            element.className = 'result ' + (isError ? 'error' : 'success');
        }

        // 测试健康检查
        async function testHealth() {
            try {
                const response = await fetch('/health');
                const data = await response.json();
                showResult('healthResult', data);
            } catch (error) {
                showResult('healthResult', `错误: ${error.message}`, true);
            }
        }

        // 测试算命API
        async function testFortune() {
            try {
                const testData = {
                    name: '测试用户',
                    birthDate: '1990-01-01',
                    gender: 'male',
                    city: '北京'
                };

                const response = await fetch('/api/fortune', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(testData)
                });

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${await response.text()}`);
                }

                const data = await response.json();
                showResult('fortuneResult', data);
            } catch (error) {
                showResult('fortuneResult', `错误: ${error.message}`, true);
            }
        }

        // 测试天气配置
        async function testWeatherConfig() {
            try {
                const response = await fetch('/api/weather/config');
                const data = await response.json();
                showResult('weatherResult', data);
            } catch (error) {
                showResult('weatherResult', `错误: ${error.message}`, true);
            }
        }

        // 测试天气API
        async function testWeather() {
            try {
                const response = await fetch('/api/weather/city/北京');
                const data = await response.json();
                showResult('weatherResult', data);
            } catch (error) {
                showResult('weatherResult', `错误: ${error.message}`, true);
            }
        }

        // 表单测试
        document.getElementById('testForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(e.target);
            const data = Object.fromEntries(formData.entries());
            
            try {
                const response = await fetch('/api/fortune', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                });

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${await response.text()}`);
                }

                const result = await response.json();
                showResult('formResult', result);
                
                if (result.success) {
                    // 如果成功，可以跳转到结果页面
                    const jumpToResult = confirm('测试成功！是否跳转到结果页面？');
                    if (jumpToResult) {
                        localStorage.setItem('fortuneResult', JSON.stringify(result.data));
                        window.location.href = 'result.html';
                    }
                }
            } catch (error) {
                showResult('formResult', `错误: ${error.message}`, true);
            }
        });

        // 页面加载时自动运行健康检查
        window.addEventListener('load', function() {
            testHealth();
        });
    </script>
</body>
</html>